<template>
  <div class="app-container policy">
    <!-- 查询 -->
    <div class="search">
      <el-form :inline="true" :model="policySearch">
        <el-form-item label="策略搜索：" class="el-item">
          <el-input
            v-model="policySearch.policyName"
            placeholder="请输入"
            @keydown.enter="getPolicySearch"
          />
        </el-form-item>
        <el-form-item class="el-item">
          <el-button type="primary" @click="getPolicySearch">
            <i class="el-icon-search" />
            查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <div class="result">
      <!-- 新增 -->
      <el-row type="flex" justify="start" class="operation">
        <el-button
          class="primary1"
          type="primary"
          icon="el-icon-circle-plus-outline"
          style="font-size: 15px"
          @click="handleAdd"
        >
          新建</el-button>
      </el-row>
      <!-- 具体表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="header"
        empty-text="暂无数据"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="policyName" label="策略名称" />
        <el-table-column prop="discount" label="策略方案" />
        <el-table-column prop="createTime" width="160" label="创建日期">
          <template slot-scope="{row}">
            <span>{{ createT(row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" class="btnDel">
          <template slot-scope="{row}">
            <el-button
              size="mini"
              type="primary"
              class="btn"
            >
              <span class="edit" @click="checkDetails(row)">查看详情</span>
            </el-button>
            <el-button
              size="mini"
              type="primary"
              class="btn"
            >
              <span class="edit" @click="handleEdit(row)">修改</span>
            </el-button>
            <el-button
              size="mini"
              type="danger"
              class="btn"
            >
              <span class="del" @click="handleDel(row)">删除</span></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" align="middle" style="height:60px">
        <el-pagination
          background
          :hide-on-single-page="value"
          :current-page.sync="policySearch.pageIndex"
          :page-size.sync="policySearch.pageSize"
          :page-sizes="[2,5,10,20,100]"
          layout="total, sizes,pager, prev, next"
          :total="total"
          prev-text="上一页"
          next-text="下一页"
          @size-change="getPolicySearch"
          @current-change="getPolicySearch"
        />
      </el-row>
    </div>
    <policy-dialog ref="policyDialog" :policy-dialog.sync="policyDialog" />
    <check-details-dialog v-if="checkDetailsDialog" :policy-check-detail="policyCheckDetail" :check-details-dialog.sync="checkDetailsDialog" />
  </div>
</template>

<script>
import { getPolicySearchAPI, delPolicyAPI } from '@/api/strategy'
import { skuCreateTime } from '@/utils/dayjs'
import policyDialog from './components/policyDialog.vue'
import CheckDetailsDialog from './components/checkDetailsDialog.vue'
export default {
  name: '',
  components: { policyDialog, CheckDetailsDialog },
  props: {},
  data() {
    return {
      tableData: [],
      policySearch: {
        pageIndex: 1,
        pageSize: 10,
        policyName: null
      },
      policyDialog: false,
      checkDetailsDialog: false,
      total: 0,
      value: true,
      policyCheckDetail: {}
    }
  },
  computed: {
    createT() {
      return function(time) {
        return skuCreateTime(time)
      }
    }
  },
  watch: {},
  created() {
    this.getPolicySearch()
  },
  methods: {
    // 获取策略 搜索策略
    async getPolicySearch() {
      try {
        const { data } = await getPolicySearchAPI(this.policySearch)
        this.tableData = data.currentPageRecords
        this.total = +data.totalCount
        if (data.totalCount > 0 && data.currentPageRecords.length === 0) {
          this.policySearch.pageIndex--
          this.getPolicySearch()
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 新建信息
    handleAdd() {
      this.policyDialog = true
    },
    // 编辑信息
    handleEdit(row) {
      this.policyDialog = true
      this.$refs.policyDialog.form = { ...row }
    },
    // 查看详情
    async checkDetails(row) {
      this.policyCheckDetail = row
      this.checkDetailsDialog = true
    },
    // 删除信息
    async handleDel(row) {
      this.$confirm('确定删除此策略？', '提示', {
        type: 'warning'
      }).then(res => {
        return delPolicyAPI(row)
      }).then(res => {
        this.$message.success('删除成功')
        this.getPolicySearch()
      }).catch(err => { console.log(err) })
    },
    // 表头样式
    header() {
      return '{line-height: 1.15;padding: 10px 0px 9px;background: rgb(243, 246, 251);font-weight: 500;text-align: left;color: rgb(102, 102, 102);}'
    }
  }
}
</script>
<style lang="scss">
.policy{
  .el-table td {
    border-bottom: unset;
  }
  .el-button--mini {
    padding: unset;
  }
}
</style>
<style scoped lang='scss'>
.app-container {
  position: relative;
  padding: unset;
}
.el-item {
  margin-bottom: unset;
}
.search {
  display: flex;
  height: 64px;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
}
.result {
  padding: 20px 15px 19px 17px;
  background-color: #fff;
}
.primary1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: none;
}
.operation {
  margin-bottom: 20px;
}
.edit {
  color: #5f84ff;
}
.del {
  color: #ff5a5a;
}
.btn{
   border: 0px solid transparent;
  background-color: transparent;
  font-size: 14px;
}
</style>
